<template>
    <div class="my-plot">
        <div class="chart">
            <div class="xy-axis">
                <div class="x-line"></div>
                <div class="x-line-arrow"></div>
                <div class="x-line-circle"></div>
                <div class="y-line"></div>
                <div class="y-line-arrow"></div>
                <div class="y-line-circle"></div>
                <div class="x-name">
                    <span>0</span>
                    <span>0.2</span>
                    <span>0.4</span>
                    <span>0.6</span>
                    <span>0.8</span>
                    <span>1</span>
                    <span>1.2</span>
                    <span>1.4</span>
                    <span>1.6</span>
                    <span>1.8</span>
                    <span>2</span>
                </div>
                <div class="y-name">
                    <span>2</span>
                    <span>1.8</span>
                    <span>1.6</span>
                    <span>1.4</span>
                    <span>1.2</span>
                    <span>1</span>
                    <span>0.8</span>
                    <span>0.6</span>
                    <span>0.4</span>
                    <span>0.2</span>
                    <span>0</span>
                </div>
                <p class="x-tips">费用消耗指数</p>
                <p class="y-tips">时间消耗指数</p>
            </div>
            <div class="origin-box">
                <template v-for="(item, index) in plotData">
                    <span class="item-name" :style="{left: item.nameX, top: item.nameY}">{{item.name}}</span>
                    <el-tooltip class="item" popper-class="dot-tooltip" effect="dark" placement="top">
                        <div slot="content">
                            {{item.name}}<br/>
                            时间消耗指数: {{item.xy[0]}}<br/>
                            费用消耗指数: {{item.xy[1]}}
                        </div>
                        <div class="my-dot" :style="{left: item.dotX, top: item.dotY}" :key="index"></div>
                    </el-tooltip>
                </template>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'index',
        props: ['chartData'],
        data () {
            return {
                // 渲染数据
                plotData: []
            }
        },
        watch: {
            chartData () {
                this.getwidthUnit()
            }
        },
        created () {
        },
        mounted () {
            this.getwidthUnit()
        },
        methods: {
            /**
             * 获取0.1占用的宽度和高度（用于定位） 2.1是最大值为2，0.1作为留白
             */
            getwidthUnit () {
                let width = document.getElementsByClassName('chart')[0].scrollWidth
                let xUnit = width / (2 * 10)
                let yUnit = 240 / (2 * 10)
                this.plotData = []
                this.chartData.forEach((item) => {
                    // 当超过最大值2时，位置超出一点即可
                    let x = item.xy[0] > 2 ? 2.05 : item.xy[0]
                    let y = item.xy[1] > 2 ? 2.05 : item.xy[1]
                    // 4px的偏移是原点大小8px*8px
                    this.plotData.push({
                        ...item,
                        // 点位置
                        dotX: (x - 1) * 10 * xUnit - 4 + 'px',
                        dotY: -(y - 1) * 10 * yUnit - 4 + 'px',
                        // 名称位置
                        // nameX: x === 2.05 ? (x - 1) * 10 * xUnit - item.name.length * 12 + 'px' : (x - 1) * 10 * xUnit - item.name.length * 12 / 2 + 'px',
                        nameX: (x - 1) * 10 * xUnit - item.name.length * 12 / 2 + 'px',
                        nameY: -(y - 1) * 10 * yUnit - 4 - 14 + 'px'
                    })
                })
            }
        }
    }
</script>

<style scoped lang="scss">
    .my-plot {
        width: 320px;
        height: 304px;
        margin: 0 auto;
        position: relative;
        .chart {
            width: calc(100% - 80px);
            height: 240px;
            position: absolute;
            top: 20px;
            right: 20px;
            .origin-box {
                position: absolute;
                width: 50%;
                height: 120px;
                top: 120px;
                left: 50%;
                .my-dot {
                    position: absolute;
                    width: 8px;
                    height: 8px;
                    background: #F09510;
                    border-radius: 4px;
                    cursor: pointer;
                    z-index: 20;
                }
                .item-name {
                    display: none;
                    position: absolute;
                    font-size: 12px;
                    color: #35373B;
                    white-space: nowrap;
                    z-index: 10;
                }
            }
            .x-line {
                position: absolute;
                height: 2px;
                background: #3A9BFF;
                width: calc(100% + 18px);
                left: -9px;
                top: 120px;
                transform: translate(0, -1px);
            }
            .x-line-arrow {
                position: absolute;
                border: 6px solid transparent;
                border-left-color: #3A9BFF;
                right: -20px;
                top: 114px;
            }
            .x-line-circle {
                position: absolute;
                width: 8px;
                height: 8px;
                background: #3A9BFF;
                border-radius: 4px;
                left: -9px;
                top: 116px;
            }
            .y-line {
                position: absolute;
                width: 2px;
                background: #3A9BFF;
                height: 100%;
                left: 50%;
                top: 0;
                transform: translate(-1px, 0);
            }
            .y-line-arrow {
                position: absolute;
                border: 6px solid transparent;
                border-bottom-color: #3A9BFF;
                left: 50%;
                transform: translate(-50%, 0);
                top: -12px;
            }
            .y-line-circle {
                position: absolute;
                width: 8px;
                height: 8px;
                background: #3A9BFF;
                border-radius: 4px;
                left: 50%;
                bottom: 0;
                transform: translate(-50%, 0);
            }
            .x-name {
                position: absolute;
                width: calc(100% + 24px);
                bottom: -30px;
                left: 50%;
                transform: translateX(-50%);
                display: flex;
                justify-content: space-between;
                align-items: center;
                color: #35373B;
            }
            .y-name {
                position: absolute;
                top: -7px;
                left: -50px;
                width: 30px;
                height: calc(100% + 16px);
                display: flex;
                justify-content: flex-end;
                align-content: space-between;
                flex-wrap: wrap;
                color: #35373B;
            }
            .x-tips {
                position: absolute;
                top: 50%;
                left: -60px;
                transform: translate(0, -50%);
                width: 14px;
                font-size: 12px;
                line-height: 18px;
                color: #35373B;
            }
            .y-tips {
                position: absolute;
                bottom: -50px;
                left: 50%;
                transform: translate(-50%, 0);
                font-size: 12px;
                line-height: 18px;
                color: #35373B;
            }
        }
    }
</style>
<style lang="scss">
    .dot-tooltip {
        background: rgba(0, 0, 0, 0.6) !important;
        margin-bottom: 20px;
        padding: 5px;
        .popper__arrow {
            border-top-color: rgba(0, 0, 0, 0.6) !important;
        }
    }
</style>
